<template>
	<div>
		<div v-if="testSubjectVO.length == 0" style="color: #999; line-height: 3; text-indent: 2em">暂无试题</div>
		<div class="question-item" v-for="(item, idx) in testSubjectVO" :key="item.id">
			<!-- 题干 -->
			<div class="question-title" :id="'anchor' + item.id">
				<div ref="blankArea" v-if="item.testSubjects.type == 4">
					{{ idx + 1 }}、
					<span class="option-item" v-html="completion(item.testSubjects.title, item)"></span>
					<span v-if="item.hasOwnProperty('score')">({{ toFixeds(item.score) }} 分)</span>
				</div>
				<p v-else>
					{{ idx + 1 }}、
					<span class="option-item" v-html="item.testSubjects.title"></span>
					<span v-if="item.hasOwnProperty('score')">({{ toFixeds(item.score) }} 分)</span>
				</p>
			</div>
			<!-- 单选题 -->
			<div v-if="item.testSubjects.type == 1">
				<el-radio-group v-model="answer1['id' + item.id]" @change="handleAnswered(item, answer1['id' + item.id])">
					<el-radio v-for="option in item.testSubjects.subjectOptionsVOList" :key="option.tag" :label="option.tag">
						{{ option.tag }}
						<span class="option-item" v-html="option.contents"></span>
					</el-radio>
				</el-radio-group>
			</div>
			<!-- 多选题 -->
			<div v-if="item.testSubjects.type == 2">
				<el-checkbox-group v-model="answer1['answer' + item.id]" @change="handleAnswered(item, answer1['answer' + item.id])">
					<el-checkbox v-for="option in item.testSubjects.subjectOptionsVOList" :label="option.tag" :key="option.tag">
						{{ option.tag }}
						<span class="option-item" v-html="option.contents"></span>
					</el-checkbox>
				</el-checkbox-group>
			</div>
			<!-- 判断题 -->
			<div v-if="item.testSubjects.type == 3">
				<el-radio-group v-model="answer1['id' + item.id]" @change="handleAnswered(item, answer1['id' + item.id])">
					<el-radio label="1">正确</el-radio>
					<el-radio label="2">错误</el-radio>
				</el-radio-group>
			</div>
			<!-- 问答题 -->
			<div v-if="item.testSubjects.type == 5">
				<el-input type="textarea" v-model="answer" placeholder="请输入内容" @change="handleAnswered(item, answer)"></el-input>
			</div>
			<slot :id="item.id"></slot>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			answer: '',
			answer1: {},
			answer2: {}
		};
	},
	props: ['testSubjectVO'],
	created() {
		this.checkedboxInit();
	},
	mounted() {
		this.bindBlur();
	},
	methods: {
		//多选题初始化v-model
		checkedboxInit() {
			this.testSubjectVO.forEach((item) => {
				if (item.testSubjects.type == 2) {
					this.$set(this.answer1, 'answer' + item.id, []);
				}
			});
		},
		//填空题绑定失去焦点事件
		bindBlur() {
			var inputs = document.getElementsByClassName('blankArea');
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].onblur = (e) => {
					let id = e.target.getAttribute('data-id');
					let type = e.target.getAttribute('data-type');
					let score = e.target.getAttribute('data-score');
					this.submitCompletion(id, type, score);
				};
			}
		},
		//填空题题干解析
		completion(v, item) {
			let blankNum = [];
			let res = v.match(/\[.*?\]/g);
			res.forEach((m) => {
				let num = m.match(/\d+/g)[0];
				blankNum.push(num);
				let dom = `
        <input
          class="blankArea blankArea-${item.id}-${num}"
          data-id="${item.id}"
          data-type="${item.testSubjects.type}"
          data-score="${item.score}"
          type="text">`;
				v = v.replace(m, dom);
			});
			this.setInput(item.id, blankNum);
			return v;
		},
		//用input存储空格值
		setInput(id, value) {
			var oInput = document.createElement('input');
			oInput.className = 'blankNum' + id;
			oInput.type = 'hidden';
			oInput.value = JSON.stringify(value);
			let questionItem = document.querySelector('.exam');
			if (questionItem) {
				questionItem.appendChild(oInput);
			}
		},
		//提交填空题答案
		submitCompletion(id, subjectsType, score) {
			let dom = document.querySelector('.blankNum' + id);
			let answer = [];
			if (dom) {
				JSON.parse(dom.value).forEach((key) => {
					let value = document.querySelector('.blankArea-' + id + '-' + key).value;
					answer.push({ key, value });
				});
			}
			let obj = { id, subjectsType, answer, score };
			this.$emit('emit', obj);
		},
		//提交答案
		handleAnswered(item, answer) {
			let obj = {
				score: item.score || 0,
				answer,
				id: item.id,
				subjectsType: item.testSubjects.type
			};
			this.$emit('emit', obj);
		}
	}
};
</script>
<style scoped lang="scss">
.question-item::v-deep {
	padding: 10px;
	margin: 10px 0;
	border: 1px dashed #eee;
	border-radius: 6px;
	.question-title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.el-radio__label {
		font-size: 18px;
	}
}

.option-item::v-deep {
	 p {
		display: inline !important;
	}
	.blankArea {
		width: 100px;
		margin: 0 5px;
		border: 0 none;
		border-bottom: 1px solid #333;
		outline: none;
		font-size: 18px;
	}
}
</style>
